<template>
  <el-container class="detail-container" v-loading="loading">
    <el-row class="detail-header">
      <el-col :span="19">
        <el-row>
          <el-col :span="8">
            <el-image class="detail-img" :src="data.image"></el-image>
          </el-col>
          <el-col :span="16" :align="'left'">
            <el-row class="detail-row">
          <span style="font-size: 22px;">
            <el-badge :value="data.onSale === 2 ? '停售' : '热卖'" type="primary">{{ data.eventName }}</el-badge>
          </span>
            </el-row>
            <el-row class="detail-row-time">
          <span style="font-size: 16px;">
            时间：{{ data.startTime }} ~ {{ data.endTime }}
          </span>
            </el-row>
            <el-row class="detail-row-time">
          <span style="font-size: 16px;">
            场馆：{{ data.place }}号场馆
          </span>
            </el-row>
            <el-row style="margin-top: 30px">
              <el-col :span="2"><span style="font-size: 18px;">票档</span></el-col>
              <el-col :span="22">
                <el-radio-group v-model="selectPrice" size="small" :disabled="data.onSale === 2">
                  <el-radio label="lowPrice" border class="detail-btn">
                    {{ this.toDecimal2(data.lowPrice) }}元
                    <el-tag v-if="data.lowSellOut" type="info" class="quehuo" size="mini" disable-transitions>售罄
                    </el-tag>
                  </el-radio>
                  <el-radio label="midPrice" border class="detail-btn">
                    {{ this.toDecimal2(data.midPrice) }}元
                    <el-tag v-if="data.midSellOut" type="info" class="quehuo" size="mini" disable-transitions>售罄
                    </el-tag>
                  </el-radio>
                  <el-radio label="highPrice" border class="detail-btn">
                    {{ this.toDecimal2(data.highPrice) }}元
                    <el-tag v-if="data.highSSellOut" type="info" class="quehuo" size="mini" disable-transitions>售罄
                    </el-tag>
                  </el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-row style="margin-top: 30px">
              <el-col :span="2"><span style="font-size: 18px;">座位</span></el-col>
              <el-col :span="22" style="min-height: 300px">
                <div v-if="selectPrice === ''" class="no-select-pd-zw">
                  <i class="el-icon-warning-outline"></i> 请选择票档
                </div>
                <ets-low-seat v-if="selectPrice === 'lowPrice'" :price="data.lowPrice"
                              :seatData="seatPurchasedLi.lowPriceSeats"
                              @changeTotalPrice="changeTotalPrice"
                              @changeSeatIdArr="changeSeatIdArr"/>
                <ets-mid-seat v-if="selectPrice === 'midPrice'" :price="data.midPrice"
                              :seatData="seatPurchasedLi.midPriceSeats" @changeTotalPrice="changeTotalPrice"
                              @changeSeatIdArr="changeSeatIdArr"/>
                <ets-high-seat v-if="selectPrice === 'highPrice'" :price="data.highPrice"
                               :seatData="seatPurchasedLi.highPriceSeats" @changeTotalPrice="changeTotalPrice"
                               @changeSeatIdArr="changeSeatIdArr"/>
              </el-col>
            </el-row>
            <el-row style="margin-top: 30px">
              <el-col :span="2"><span style="font-size: 18px;">合计</span></el-col>
              <el-col :span="22">
                <span class="detail-total-price">
                  ￥ {{ totalPrice }}
                </span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 30px">
              <el-col :offset="20" :span="2">
                <el-button type="primary" @click="purchase" v-loading="purchaseLoading"
                           :disabled="totalPrice === '0.00'">购 买
                </el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-divider/>
        <el-row>
          <el-col :align="'left'" :span="24">
            <h3>项目介绍</h3>
          </el-col>
        </el-row>
        <el-row>
          <el-col :align="'left'">
            <div v-html="data.eventDescr"></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :align="'left'" :span="24" style="margin-top: 20px">
            <h3>购票须知</h3>
          </el-col>
        </el-row>
        <el-row>
          <el-col :align="'left'">
            <div class="gpxz-front">限购规则</div>
            每笔订单最多购买4张、每个账号最多购买4张。
            <div class="gpxz">退票/换票规则</div>
            票品为有价票券，非普通商品，其背后承载的文化服务具有时效性，稀缺性等特征，不支持退换。
            <div class="gpxz">入场规则</div>
            支持多种票品验票后入场，如证件电子票。
            <div class="gpxz">儿童购票</div>
            1.2米以下儿童免票，需家长陪同（每个成人仅能带一名儿童）
            <div class="gpxz">发票说明</div>
            演出开始前，去【订单详情页】提交发票申请。我们会将电子发票发送至您的邮箱。
            <div class="gpxz">实名购票规则</div>
            一张门票对应一个证件；证件支持：外国人永久居留身份证/台湾居民来往大陆通行证/港澳台居民居住证/身份证/护照/港澳居民来往内地通行证
            <div class="gpxz">异常排单说明</div>
            对于异常订购行为，大麦网有权在订单成立或者生效之后取消相应订单。异常订购行为包括但不限于以下情形：
            （1）通过同一ID订购超出限购张数的订单。
            （2）经合理判断认为非真实消费者的下单行为，包括但不限于通过批量相同或虚构的支付账号、收货地址（包括下单时填写及最终实际收货地址）、收件人、电话号码订购超出限购张数的订单。
            <div class="gpxz">温馨提示</div>
            1.购买前请您提前规划好行程，做好相应准备，以免影响您的正常观演，感谢您的理解和配合。2.若演出受不可抗力影响延期或取消，大麦将对演出票订单按照项目官方通知方案进行处理，其他因观演发生的费用需由您自行承担。
            <div class="gpxz-end"></div>
          </el-col>
        </el-row>
        <el-divider/>
      </el-col>
      <el-col :span="5" :align="'left'">
        <el-card shadow="never">
          <el-row class="tips">
            <i class="el-icon-circle-close them-color"></i>
            <span class="tips-title">不支持退</span>
            <div class="tips-content">
              票品为有价票券，非普通商品，其背后承载的文化服务具有时效性，稀缺性等特征，不支持退换。
            </div>
          </el-row>
          <el-row class="tips">
            <i class="el-icon-circle-check them-color"></i>
            <span class="tips-title">可选座</span>
            <div class="tips-content">
              本项目支持自主选座。
            </div>
          </el-row>
          <el-row class="tips">
            <i class="el-icon-circle-check them-color"></i>
            <span class="tips-title">电子票</span>
            <div class="tips-content">
              电子票：通过票夹中的二维码或身份证，可以直接验票入场（具体以下单后票夹信息为准）
            </div>
          </el-row>
          <el-row class="tips">
            <i class="el-icon-circle-check them-color"></i>
            <span class="tips-title">电子发票</span>
            <div class="tips-content">
              发票开具方：成都XXX有限公司<br/>
              该项目支持开具电子发票。该发票由第三方主办提供，需要在演出开始前提交发票申请，一般演出结束后1个月左右开具
            </div>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </el-container>
</template>

<script>
export default {
  name: 'Detail',
  created () {
    this.getEventDetail(this.$route.params.id)
    this.getSeats(this.$route.params.id)
  },
  data () {
    return {
      selectPrice: '',
      totalPrice: '0.00',
      purchaseLoading: false,
      loading: false,
      data: {
        id: 1,
        eventName: '',
        startTime: '',
        endTime: '',
        lowPrice: 0,
        midPrice: 0,
        highPrice: 0,
        image: '',
        eventDescr: '',
        place: '',
        onSale: false,
        lowSellOut: false,
        midSellOut: false,
        highSSellOut: false
      },
      seatPurchasedLi: {
        lowPriceSeats: [],
        midPriceSeats: [],
        highPriceSeats: []
      },
      ticketData: {
        userID: 0,
        eventID: 0,
        seatID: [],
        ticketPrice: ''
      }
    }
  },
  watch: {
    selectPrice: function (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.totalPrice = '0.00'
      }
    }
  },
  methods: {
    getSeats (id) {
      let _this = this
      this.$axios({
        url: '/api/seats/seatPurchased?eventID=' + id,
        method: 'get',
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          'token': _this.getToken()
        }
      }).then((response) => {
        if (response.data.code === 1) {
          _this.seatPurchasedLi = response.data.data
        } else {
          _this.isTokenExpired(_this, response.data.msg)
          this.err(response.data.msg)
        }
      })
    },
    getEventDetail (id) {
      let _this = this
      this.$axios({
        url: '/api/events/' + id,
        method: 'get',
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          'token': _this.getToken()
        }
      }).then((response) => {
        if (response.data.code === 1) {
          _this.data = response.data.data
          _this.data.eventDescr = _this.data.eventDescr.replaceAll('\n', '<br>')
        } else {
          _this.isTokenExpired(_this, response.data.msg)
          this.err(response.data.msg)
        }
      })
    },
    purchase () {
      let _this = this
      if (_this.getToken() === null || _this.getToken() === '' || _this.getToken() === undefined) {
        _this.warn('您未登录，无法进行购买。如需购买请登录！')
        return
      }
      _this.loading = true
      this.ticketData.ticketPrice = this.totalPrice / this.ticketData.seatID.length
      this.ticketData.userID = _this.getUserID()
      this.ticketData.eventID = _this.$route.params.id
      this.purchaseLoading = true
      this.$axios({
        url: '/api/tickets',
        method: 'post',
        data: JSON.stringify(this.ticketData),
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          'token': _this.getToken()
        }
      }).then((response) => {
        _this.purchaseLoading = false
        if (response.data.code === 1) {
          _this.loading = false
          document.write(response.data.data)
        } else {
          _this.isTokenExpired(_this, response.data.msg)
          this.err(response.data.msg)
        }
      })
    },
    changeTotalPrice (price) {
      this.totalPrice = this.toDecimal2(price)
    },
    changeSeatIdArr (seatArr) {
      this.ticketData.seatID = seatArr
    }
  }
}
</script>

<style scoped>
.detail-container {
  width: 80%;
  margin: 0 auto;
}

.detail-header {
  margin-top: 20px;
  width: 100%;
}

.detail-img {
  height: 375px;
  width: 278px;
}

.detail-row {
  margin-bottom: 40px;
}

.detail-row-time {
  margin-bottom: 10px;
  margin-top: 10px;
}

.them-color {
  color: var(--them-color);
  font-weight: bold;
}

.tips {
  margin-bottom: 10px;
}

.tips-title {
  font-size: 14px;
}

.tips-content {
  margin: 5px;
  font-size: 12px;
  color: #999999;
}

.quehuo {
  background-color: #FFFFFF;
  border-radius: 10px;
  font-size: 10px;
}

.detail-btn {
  min-height: 35px;
  min-width: 50px;
  color: black;
  border-radius: 5px;
  margin-right: 10px;
}

.no-select-pd-zw {
  font-size: 12px;
  margin-top: 5px;
  color: #999999;
}

.detail-total-price {
  font-size: 18px;
  color: var(--them-color);
  font-weight: bold;
}

.gpxz-front {
  color: #999999;
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.gpxz {
  color: #999999;
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.gpxz-end {
  margin-bottom: 30px;
}
</style>
